<template>
  <div class="course-list">
    <el-card>
      <div slot="header">
        <el-input
          v-model="searchName"
          placeholder="请输入搜索内容"
          @keyup.enter.native="loadCourses"
          clearable
          @clear="loadCourses"
          ><el-button
            slot="append"
            icon="el-icon-search"
            @click="loadCourses"
          ></el-button>
        </el-input>
        <el-button
          v-if="role == 'teacher'"
          style="float: right; margin-top: -10px"
          type="primary"
          @click="
            $router.push({
              name: 'course-create',
            })
          "
          >添加课程</el-button
        >
      </div>
      <!-- 课程展示区域 -->
      <el-table :data="courses" style="width: 100%; margin-bottom: 20px">
        <el-table-column prop="id" label="ID" width="100"> </el-table-column>
        <el-table-column prop="courseName" label="课程名称" width="230">
        </el-table-column>
        <el-table-column prop="free" label="付费">
          <template slot-scope="scope">
            {{ scope.row.free ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
        <el-table-column label="课程封面">
          <template slot-scope="scope">
            <img :src="scope.row.image" alt="" class="course-img" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="上架状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="true"
              inactive-value="false"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="onStateChange(scope.row)"
            >
              <!-- :disabled="scope.row.isStatusLoading" -->
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="role == 'teacher'"
              @click="
                $router.push({
                  name: 'course-edit',
                  params: {
                    courseId: scope.row.id,
                  },
                })
              "
              >编辑</el-button
            >
            <el-button
              v-if="role == 'teacher'"
              @click="
                $router.push({
                  name: 'course-section',
                  params: {
                    courseId: scope.row.id,
                  },
                })
              "
              >内容管理</el-button
            >
            <el-button type="danger" @click="deleteCourse(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="loadCourses"
        @current-change="loadCourses"
        :current-page.sync="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  getQueryCourses,
  disableCourseInfo,
  delCourseInfo,
} from "@/services/course";

export default {
  name: "CourseList",
  data() {
    return {
      // 筛选功能参数（表单数据）
      page: 1,
      pageSize: 10,
      searchName: "",
      // 课程信息
      courses: [],
      // 数据总条数
      total: 0,
      role: "",
      // 加载状态
    };
  },
  created() {
    // 加载课程
    this.role = localStorage.getItem("userRole");
    this.loadCourses();
  },
  methods: {
    // 上下架切换处理
    async onStateChange(row) {
      // 点击开关，开启禁用状态
      const { data } = await disableCourseInfo({
        id: row.id,
        status: row.status,
      });
      if (data.msg) {
        this.$message.success(data.msg);
      }
    },
    // 加载课程
    async loadCourses() {
      const { data } = await getQueryCourses({
        page: this.page,
        pageSize: this.pageSize,
        searchName: this.searchName,
      });
      if (data.data) {
        // 保存课程信息
        this.courses = data.data.courseInfos;
        this.total = data.data.total;
      }
    },
    async deleteCourse(row) {
      this.$confirm("此操作将删除该课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          const { data } = await delCourseInfo({ courseId: row.id });

          this.$message.success("删除成功！");
          // this.$message.success(data.msg);
          this.loadCourses();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 20px;
}

.course-img {
  height: 100px;
}
.el-input {
  width: 250px;
}
</style>
